<template>
  <div class="scroll-container">
    <div class="scroll-content">
      <div v-for="(item, index) in duplicatedItems" :key="`${item.id}-${index}`" class="scroll-item">
        <div class="item-header">
          <div class="item-field">工单号：{{ item.workOrderNumber }}</div>
          <div class="item-field">计划时间：{{ item.planTime }}</div>
          <div class="item-field">产品名称：{{ item.productName }}</div>
          <div class="item-field">工单数量：{{ item.workOrderQuantity }}</div>
        </div>
        <div class="progress-bar">
          <div class="progress" :style="{ width: item.productionProgress + '%' }"></div>
          <div class="progress-value">{{ item.productionProgress }}%</div>
        </div>
        <div class="item-footer">
          <div class="item-field">投料数：{{ item.materialQuantity }}</div>
          <div class="item-field">合格报工数：{{ item.qualifiedReportQuantity }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, workOrderNumber: 'WO001', planTime: '2024-01-01', productName: '产品A', workOrderQuantity: '1000', productionProgress: 30, materialQuantity: '900', qualifiedReportQuantity: '850' },
      { id: 2, workOrderNumber: 'WO002', planTime: '2024-01-05', productName: '产品B', workOrderQuantity: '2000', productionProgress: 50, materialQuantity: '1800', qualifiedReportQuantity: '1700' },
      { id: 3, workOrderNumber: 'WO003', planTime: '2024-01-10', productName: '产品C', workOrderQuantity: '1500', productionProgress: 70, materialQuantity: '1400', qualifiedReportQuantity: '1350' },
      { id: 4, workOrderNumber: 'WO004', planTime: '2024-01-15', productName: '产品D', workOrderQuantity: '800', productionProgress: 90, materialQuantity: '750', qualifiedReportQuantity: '720' },
      { id: 5, workOrderNumber: 'WO005', planTime: '2024-01-20', productName: '产品E', workOrderQuantity: '1200', productionProgress: 40, materialQuantity: '1100', qualifiedReportQuantity: '1000' }
    ]);

    // 创建双倍数组实现无缝滚动
    const duplicatedItems = ref([...items.value, ...items.value]);

    return {
      duplicatedItems
    };
  },
};
</script>

<style>
.scroll-container {
  width: 300px;
  height: 350px;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  animation: scroll 20s linear infinite;
  display: flex;
  flex-direction: column;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.scroll-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
  height: 110px; /* 保持与滚动计算一致的高度 */
  box-sizing: border-box;
}

.item-header,
.item-footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.item-field {
  font-size: 14px;
  color: white;
  margin-right: 10px;
}

.progress-bar {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin: 5px 0;
}

.progress {
  height: 10px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.progress-value {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: white;
}

/* 悬停暂停动画 */
.scroll-container:hover .scroll-content {
  animation-play-state: paused;
}
</style>
